<template>
  <div class="product-item">
    <el-image :src="data.cover" class="item-img" @click="onClickDetail" />
    <div class="item-main" @click="onClickDetail">
      <el-tooltip :content="data.title" placement="top">
        <div class="item-title base-text-ellipsis-2">{{ data.title }}</div>
      </el-tooltip>
      <KIcon class="item-icon" size="14px" icon="icon-juejin-link" @click.stop="onCopy(data.product_url)" />
      <KIcon class="item-icon" size="14px" icon="icon-business-id" @click.stop="onCopy(data.product_id)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import JumpService from '@/services/jump/index';
import { useCopy } from '@/hooks/use-copy';
defineOptions({ name: 'KgjInvestProductItem' });
interface Props {
  data: any;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => ({})
});

const { onCopy } = useCopy();
const onClickDetail = () => {
  JumpService.jump(props.data?.product_url);
};
</script>

<style lang="scss" scoped>
.product-item {
  display: flex;
  align-items: center;

  .item-img {
    flex-shrink: 0;
    width: 47px;
    height: 47px;
    margin-right: 8px;
    cursor: pointer;
  }

  .item-main {
    display: flex;
    overflow: hidden;
  }

  .item-title {
    flex: 1;
    overflow: hidden;
    color: #303133;
    cursor: pointer;
  }

  .item-icon {
    flex-shrink: 0;
    margin-top: 5px;
    margin-left: 8px;
    color: #606266;
    cursor: pointer;
  }

  .item-title,
  .item-icon {
    &:hover {
      color: var(--brand-6);
    }
  }
}
</style>
